<template>
  <div id="app">
    <!-- 主视口 -->
    <router-view></router-view>
  </div>
</template>
<script>
import { throttle } from "@/utils/index.js";
export default {
  data() {
    return {
      refresh: true
    };
  },
  methods: {
    resizeWindow() {
      const windowOuterWidth = $(window).outerWidth();
      if (windowOuterWidth < 768) {
        console.log("手机屏幕");
        if (this.$store.state.device != "mobile") {
          this.refresh = false;
          this.$nextTick(() => {
            this.refresh = true;
          });
        }
        this.$store.commit("setDevice", "mobile");
      } else if (windowOuterWidth >= 768 && windowOuterWidth < 1200) {
        console.log("平板");
        if (this.$store.state.device != "pad") {
          this.refresh = false;
          this.$nextTick(() => {
            this.refresh = true;
          });
        }
        this.$store.commit("setDevice", "pad");
      } else {
        console.log("pc");
        if (this.$store.state.device != "pc") {
          this.refresh = false;
          this.$nextTick(() => {
            this.refresh = true;
          });
        }
        this.$store.commit("setDevice", "pc");
      }
    }
  },
  beforeDestroy() {
    $(window).off("resize");
  },
  mounted() {
    this.resizeWindow();
    $(window).on("resize", throttle(this.resizeWindow, 500));
  }
};
</script>
<style scoped lang="scss"></style>
